ಕನ್ನಡ
ಸುಧಾರಿತ SEO, ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಹಂಚಿಕೆ ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ Next.js ಮೆಟಾಡೇಟಾ API ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಿ. ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ನಿರ್ವಹಿಸುವುದು ಹೇಗೆ ಎಂದು ತಿಳಿಯಿರಿ.
Next.js ಮೆಟಾಡೇಟಾ API: SEO ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಅಂತಿಮ ಮಾರ್ಗದರ್ಶಿ
ಇಂದಿನ ಸ್ಪರ್ಧಾತ್ಮಕ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ಯಶಸ್ಸಿಗೆ ಬಲವಾದ ಆನ್‌ಲೈನ್ ಉಪಸ್ಥಿತಿ ಅತ್ಯಗತ್ಯ. ಸರ್ಚ್ ಇಂಜಿನ್ ಆಪ್ಟಿಮೈಸೇಶನ್ (SEO) ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಹಂಚಿಕೆ ಯಾವುದೇ ಯಶಸ್ವಿ ಆನ್‌ಲೈನ್ ಕಾರ್ಯತಂತ್ರದ ಪ್ರಮುಖ ಅಂಶಗಳಾಗಿವೆ. Next.js, ಒಂದು ಜನಪ್ರಿಯ ರಿಯಾಕ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್, ಒಂದು ಶಕ್ತಿಶಾಲಿ ಮೆಟಾಡೇಟಾ API ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ನಿರ್ವಹಿಸಲು ಮತ್ತು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಿಗಾಗಿ ತಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ Next.js ಮೆಟಾಡೇಟಾ API ಅನ್ನು ಅದರ ವೈಶಿಷ್ಟ್ಯಗಳು, ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನವನ್ನು ಒಳಗೊಂಡಂತೆ ವಿವರವಾಗಿ ಅನ್ವೇಷಿಸುತ್ತದೆ.
Next.js ಮೆಟಾಡೇಟಾ API ಎಂದರೇನು?
Next.js ಮೆಟಾಡೇಟಾ API ಒಂದು ಅಂತರ್ನಿರ್ಮಿತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಿಗಾಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಮೆಟಾಡೇಟಾ ಎಂದರೆ ಡೇಟಾದ ಬಗ್ಗೆ ಡೇಟಾ, ಮತ್ತು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಸಂದರ್ಭದಲ್ಲಿ, ಇದು ಒಂದು ವೆಬ್‌ಪುಟವನ್ನು ವಿವರಿಸುವ ಮಾಹಿತಿಯನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಅದರ ಶೀರ್ಷಿಕೆ, ವಿವರಣೆ, ಕೀವರ್ಡ್‌ಗಳು ಮತ್ತು ಲೇಖಕ. ಈ ಮಾಹಿತಿಯನ್ನು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಪುಟದ ವಿಷಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ಪುಟವನ್ನು ಹಂಚಿಕೊಂಡಾಗ ಪೂರ್ವವೀಕ್ಷಣೆಗಳನ್ನು ರಚಿಸಲು ಬಳಸುತ್ತವೆ.
ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ಮೆಟಾಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸುವುದು ಪ್ರತಿ HTML ಪುಟದ <head> ವಿಭಾಗಕ್ಕೆ ಕೈಯಾರೆ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿತ್ತು. ಈ ಪ್ರಕ್ರಿಯೆಯು ಬೇಸರದ ಮತ್ತು ದೋಷಪೂರಿತವಾಗಿತ್ತು, ವಿಶೇಷವಾಗಿ ಅನೇಕ ಪುಟಗಳನ್ನು ಹೊಂದಿರುವ ದೊಡ್ಡ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ. Next.js ಮೆಟಾಡೇಟಾ API ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ, ನೇರವಾಗಿ ತಮ್ಮ Next.js ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಸುಧಾರಿತ ನಿರ್ವಹಣೆ, ಡೈನಾಮಿಕ್ ಮೆಟಾಡೇಟಾ ಉತ್ಪಾದನೆ ಮತ್ತು ವರ್ಧಿತ SEO ಕಾರ್ಯಕ್ಷಮತೆ ಸೇರಿದಂತೆ ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಮೆಟಾಡೇಟಾ ಏಕೆ ಮುಖ್ಯ?
ಮೆಟಾಡೇಟಾವು SEO ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನಲ್ಲಿ ನಿರ್ಣಾಯಕ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ. ಅದರ ಪ್ರಾಮುಖ್ಯತೆಯ ವಿಭಜನೆ ಇಲ್ಲಿದೆ:
SEO (ಸರ್ಚ್ ಇಂಜಿನ್ ಆಪ್ಟಿಮೈಸೇಶನ್)
- ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕಗಳು: Google, Bing, ಮತ್ತು DuckDuckGo ನಂತಹ ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ವೆಬ್‌ಪುಟದ ವಿಷಯ ಮತ್ತು ಸಂದರ್ಭವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮೆಟಾಡೇಟಾವನ್ನು ಬಳಸುತ್ತವೆ. ನಿಖರವಾದ ಮತ್ತು ಸಂಬಂಧಿತ ಮೆಟಾಡೇಟಾವು ವೆಬ್‌ಸೈಟ್‌ನ ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕಗಳನ್ನು ಸುಧಾರಿಸಬಹುದು, ಇದು ಸಂಭಾವ್ಯ ಗ್ರಾಹಕರಿಗೆ ಹೆಚ್ಚು ಗೋಚರವಾಗುವಂತೆ ಮಾಡುತ್ತದೆ.
- ಕ್ಲಿಕ್-ಥ್ರೂ ದರಗಳು (CTR): ಶೀರ್ಷಿಕೆ ಮತ್ತು ವಿವರಣೆ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳು ಸರ್ಚ್ ಇಂಜಿನ್ ಫಲಿತಾಂಶಗಳ ಪುಟಗಳಲ್ಲಿ (SERPs) ಸ್ನಿಪ್ಪೆಟ್ ಆಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ. ಚೆನ್ನಾಗಿ ರಚಿಸಲಾದ ಶೀರ್ಷಿಕೆ ಮತ್ತು ವಿವರಣೆಯು ಬಳಕೆದಾರರನ್ನು ಲಿಂಕ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಲು ಪ್ರೇರೇಪಿಸಬಹುದು, ಇದು ವೆಬ್‌ಸೈಟ್‌ನ CTR ಅನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
- ಕೀವರ್ಡ್ ಟಾರ್ಗೆಟಿಂಗ್: ಮೆಟಾಡೇಟಾವು ನಿಮ್ಮ ವ್ಯಾಪಾರ ಅಥವಾ ಉದ್ಯಮಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ನಿರ್ದಿಷ್ಟ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನಿಮ್ಮ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಈ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ, ಸಂಬಂಧಿತ ಹುಡುಕಾಟ ಪ್ರಶ್ನೆಗಳಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಗೋಚರತೆಯನ್ನು ನೀವು ಸುಧಾರಿಸಬಹುದು.
ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಆಪ್ಟಿಮೈಸೇಶನ್
- ಲಿಂಕ್ ಪೂರ್ವವೀಕ್ಷಣೆಗಳು: ಫೇಸ್‌ಬುಕ್, ಟ್ವಿಟರ್, ಲಿಂಕ್ಡ್‌ಇನ್ ಮತ್ತು ಇತರ ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ವೆಬ್‌ಪುಟವನ್ನು ಹಂಚಿಕೊಂಡಾಗ, ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಶೀರ್ಷಿಕೆ, ವಿವರಣೆ ಮತ್ತು ಚಿತ್ರವನ್ನು ಒಳಗೊಂಡಿರುವ ಪೂರ್ವವೀಕ್ಷಣೆಯನ್ನು ರಚಿಸುತ್ತದೆ. ಮೆಟಾಡೇಟಾವು ಈ ಪೂರ್ವವೀಕ್ಷಣೆಯನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ, ಇದು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿದೆ ಮತ್ತು ಪುಟದ ವಿಷಯವನ್ನು ನಿಖರವಾಗಿ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ಬ್ರ್ಯಾಂಡಿಂಗ್: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಎಲ್ಲಾ ಪುಟಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಮೆಟಾಡೇಟಾವು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮದಲ್ಲಿ ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಗುರುತನ್ನು ಬಲಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಬ್ರ್ಯಾಂಡಿಂಗ್ ಅಂಶಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ನೀವು ಸುಸಂಬದ್ಧ ಮತ್ತು ಗುರುತಿಸಬಹುದಾದ ಬ್ರ್ಯಾಂಡ್ ಉಪಸ್ಥಿತಿಯನ್ನು ರಚಿಸಬಹುದು.
- ನಿಶ್ಚಿತಾರ್ಥ: ಚೆನ್ನಾಗಿ ರಚಿಸಲಾದ ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪೂರ್ವವೀಕ್ಷಣೆಯು ಬಳಕೆದಾರರನ್ನು ಹಂಚಿದ ಲಿಂಕ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಲು ಮತ್ತು ವಿಷಯದೊಂದಿಗೆ ತೊಡಗಿಸಿಕೊಳ್ಳಲು ಪ್ರೋತ್ಸಾಹಿಸಬಹುದು. ಇದು ಹೆಚ್ಚಿದ ವೆಬ್‌ಸೈಟ್ ಟ್ರಾಫಿಕ್ ಮತ್ತು ಬ್ರ್ಯಾಂಡ್ ಜಾಗೃತಿಗೆ ಕಾರಣವಾಗಬಹುದು.
Next.js ಮೆಟಾಡೇಟಾ API ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು
Next.js ಮೆಟಾಡೇಟಾ API ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ವೆಬ್‌ಸೈಟ್ ಮಾಲೀಕರಿಗೆ ಹಲವಾರು ಪ್ರಮುಖ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:- ಸರಳೀಕೃತ ಮೆಟಾಡೇಟಾ ನಿರ್ವಹಣೆ: API ನಿಮ್ಮ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸಲು ಸರಳ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಡೈನಾಮಿಕ್ ಮೆಟಾಡೇಟಾ ಉತ್ಪಾದನೆ: ಪುಟದ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಮೆಟಾಡೇಟಾವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಉತ್ಪಾದಿಸಬಹುದು, ಇದು ವೈಯಕ್ತಿಕಗೊಳಿಸಿದ ಮತ್ತು ಸಂಬಂಧಿತ ಮಾಹಿತಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಉತ್ಪನ್ನದ ಹೆಸರು ಮತ್ತು ಬೆಲೆಯನ್ನು ಒಳಗೊಂಡಿರುವ ಉತ್ಪನ್ನ ಪುಟದ ಶೀರ್ಷಿಕೆಯನ್ನು ರಚಿಸಬಹುದು.
- ಸುಧಾರಿತ SEO ಕಾರ್ಯಕ್ಷಮತೆ: ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳಿಗೆ ನಿಖರ ಮತ್ತು ಸಂಬಂಧಿತ ಮೆಟಾಡೇಟಾವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, API ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕಗಳನ್ನು ಸುಧಾರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ವರ್ಧಿತ ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಹಂಚಿಕೆ: ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಹಂಚಿಕೊಂಡಾಗ ನಿಮ್ಮ ವೆಬ್‌ಪುಟಗಳನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು API ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಅವುಗಳು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಆಕರ್ಷಕವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ನಿರ್ವಹಣೆ: ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸುವುದು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್‌ನಾದ್ಯಂತ ಮೆಟಾಡೇಟಾವನ್ನು ನವೀಕರಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
- ಕಾರ್ಯಕ್ಷಮತೆ: ಮೆಟಾಡೇಟಾ API ಅನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾಗಿದೆ, ಇದು ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳ ಲೋಡಿಂಗ್ ವೇಗದ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
Next.js ಮೆಟಾಡೇಟಾ API ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು
Next.js ಮೆಟಾಡೇಟಾ API ಅನ್ನು ಎರಡು ಪ್ರಾಥಮಿಕ ವಿಧಾನಗಳಲ್ಲಿ ಬಳಸಬಹುದು:metadata ಆಬ್ಜೆಕ್ಟ್ ಬಳಸಿ ಅಥವಾ generateMetadata ಫಂಕ್ಷನ್ ಬಳಸಿ.
1. metadata ಆಬ್ಜೆಕ್ಟ್ ಬಳಸುವುದು
ಮೆಟಾಡೇಟಾವನ್ನು ಸೇರಿಸುವ ಸರಳ ಮಾರ್ಗವೆಂದರೆ ನಿಮ್ಮ ಪುಟ ಅಥವಾ ಲೇಔಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ metadata ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಫ್ತು ಮಾಡುವುದು. ಈ ಆಬ್ಜೆಕ್ಟ್ ಪುಟದ ಮೆಟಾಡೇಟಾವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ವಿವಿಧ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
ಉದಾಹರಣೆ:
// app/page.js
export const metadata = {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
keywords: ['blog', 'post', 'javascript', 'nextjs'],
}
export default function Page() {
return (
<div>
<h1>My Awesome Blog Post</h1>
<p>This is the content of my blog post.</p>
</div>
)
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಪುಟಕ್ಕಾಗಿ title, description, ಮತ್ತು keywords ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿದ್ದೇವೆ. Next.js ಈ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ HTML ಪುಟದ <head> ವಿಭಾಗಕ್ಕೆ ಸೇರಿಸುತ್ತದೆ.
2. generateMetadata ಫಂಕ್ಷನ್ ಬಳಸುವುದು
API ನಿಂದ ಪಡೆದ ಡೇಟಾವನ್ನು ಆಧರಿಸಿ ಡೈನಾಮಿಕ್ ಆಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ಉತ್ಪಾದಿಸುವಂತಹ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ, ನೀವು generateMetadata ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಬಹುದು. ಈ ಫಂಕ್ಷನ್ ನಿಮಗೆ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ಮತ್ತು ಅದನ್ನು ಮೆಟಾಡೇಟಾ ಆಬ್ಜೆಕ್ಟ್ ರಚಿಸಲು ಬಳಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ:
// app/blog/[slug]/page.js
export async function generateMetadata({ params, searchParams }, parent) {
// read route params
const slug = params.slug
// fetch data directly
const post = await fetch(`https://.../posts/${slug}`).then((res) => res.json())
// Or alternatively use the exported metadata fields as variables
// const previousImages = (await parent).openGraph?.images || []
return {
title: post.title,
description: post.excerpt,
openGraph: {
images: [`https://.../posts/${slug}/og.png`],
},
}
}
export default async function Page({ params }) {
const slug = params.slug
const post = await fetch(`https://.../posts/${slug}`).then((res) => res.json())
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
)
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, generateMetadata ಫಂಕ್ಷನ್ slug ಪ್ಯಾರಾಮೀಟರ್ ಆಧರಿಸಿ API ನಿಂದ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಕುರಿತು ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ. ನಂತರ ಅದು ಈ ಡೇಟಾವನ್ನು title, description, ಮತ್ತು openGraph ಮೆಟಾಡೇಟಾವನ್ನು ರಚಿಸಲು ಬಳಸುತ್ತದೆ. openGraph ಮೆಟಾಡೇಟಾವನ್ನು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ಲಿಂಕ್ ಪೂರ್ವವೀಕ್ಷಣೆಗಳನ್ನು ರಚಿಸಲು ಬಳಸುತ್ತವೆ.
ಮೆಟಾಡೇಟಾ ಪ್ರಾಪರ್ಟಿಗಳು
Next.js ಮೆಟಾಡೇಟಾ API ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಿಗಾಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬಳಸಬಹುದಾದ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಇಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಕೆಲವು ಪ್ರಾಪರ್ಟಿಗಳಿವೆ:title: ವೆಬ್‌ಪುಟದ ಶೀರ್ಷಿಕೆ. ಇದು ಬ್ರೌಸರ್ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಮತ್ತು ಸರ್ಚ್ ಇಂಜಿನ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ.description: ವೆಬ್‌ಪುಟದ ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ. ಇದು ಸರ್ಚ್ ಇಂಜಿನ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪೂರ್ವವೀಕ್ಷಣೆಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ.keywords: ವೆಬ್‌ಪುಟದ ವಿಷಯಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಕೀವರ್ಡ್‌ಗಳ ಪಟ್ಟಿ.authors: ಲೇಖಕರ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಸರಣಿ, ಪ್ರತಿಯೊಂದೂnameಪ್ರಾಪರ್ಟಿ ಮತ್ತು ಐಚ್ಛಿಕವಾಗಿurlಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.robots: ಸರ್ಚ್ ಇಂಜಿನ್ ಕ್ರಾಳರ್‌ಗಳು ಪುಟದಲ್ಲಿನ ಲಿಂಕ್‌ಗಳನ್ನು ಹೇಗೆ ಸೂಚಿಕೆ ಮಾಡಬೇಕು ಮತ್ತು ಅನುಸರಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳಲ್ಲಿindex, follow,noindex, nofollow, ಮತ್ತುnosnippetಸೇರಿವೆ.openGraph: ಓಪನ್ ಗ್ರಾಫ್ ಮೆಟಾಡೇಟಾವನ್ನು ಹೊಂದಿರುವ ಆಬ್ಜೆಕ್ಟ್, ಇದನ್ನು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ಲಿಂಕ್ ಪೂರ್ವವೀಕ್ಷಣೆಗಳನ್ನು ರಚಿಸಲು ಬಳಸುತ್ತವೆ.twitter: ಟ್ವಿಟರ್-ನಿರ್ದಿಷ್ಟ ಮೆಟಾಡೇಟಾವನ್ನು ಹೊಂದಿರುವ ಆಬ್ಜೆಕ್ಟ್, ಇದನ್ನು ಟ್ವಿಟರ್‌ನಲ್ಲಿ ವೆಬ್‌ಪುಟಗಳನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ.icons: ಫೆವಿಕಾನ್‌ನಂತಹ ವೆಬ್‌ಪುಟಕ್ಕೆ ಬಳಸುವ ಐಕಾನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.viewport: ವೆಬ್‌ಪುಟಕ್ಕಾಗಿ ವ್ಯೂಪೋರ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುತ್ತದೆ, ಇದು ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.themeColor: ವೆಬ್‌ಪುಟಕ್ಕಾಗಿ ಥೀಮ್ ಬಣ್ಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ಇದನ್ನು ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳು ಬ್ರೌಸರ್ ಟ್ಯಾಬ್‌ನ ನೋಟವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬಳಸುತ್ತವೆ.alternates: ವೆಬ್‌ಪುಟದ ಪರ್ಯಾಯ ಆವೃತ್ತಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಅನುವಾದಗಳು ಅಥವಾ ವಿಭಿನ್ನ ಸ್ವರೂಪಗಳು.verification: ಗೂಗಲ್ ಸರ್ಚ್ ಕನ್ಸೋಲ್ ಮತ್ತು ಪಿಂಟರೆಸ್ಟ್‌ನಂತಹ ವಿವಿಧ ಸೇವೆಗಳೊಂದಿಗೆ ವೆಬ್‌ಸೈಟ್‌ನ ಮಾಲೀಕತ್ವವನ್ನು ಪರಿಶೀಲಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
ಓಪನ್ ಗ್ರಾಫ್ ಮೆಟಾಡೇಟಾ
ಓಪನ್ ಗ್ರಾಫ್ (OG) ಮೆಟಾಡೇಟಾವು ಒಂದು ಪ್ರೋಟೋಕಾಲ್ ಆಗಿದ್ದು, ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಹಂಚಿಕೊಂಡಾಗ ನಿಮ್ಮ ವೆಬ್‌ಪುಟಗಳನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. Next.js ಮೆಟಾಡೇಟಾ API ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಿಗೆ ಓಪನ್ ಗ್ರಾಫ್ ಮೆಟಾಡೇಟಾವನ್ನು ಸೇರಿಸುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.ಉದಾಹರಣೆ:
// app/page.js
export const metadata = {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
openGraph: {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
url: 'https://example.com/blog/my-awesome-blog-post',
siteName: 'Example Website',
images: [
{
url: 'https://example.com/images/blog-post.jpg',
width: 800,
height: 600,
alt: 'My Awesome Blog Post Image',
},
],
type: 'article',
},
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಓಪನ್ ಗ್ರಾಫ್ ಮೆಟಾಡೇಟಾಕ್ಕಾಗಿ title, description, url, siteName, images, ಮತ್ತು type ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿದ್ದೇವೆ. ಪುಟವನ್ನು ಹಂಚಿಕೊಂಡಾಗ ಲಿಂಕ್ ಪೂರ್ವವೀಕ್ಷಣೆಯನ್ನು ರಚಿಸಲು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುತ್ತವೆ.
ಪ್ರಮುಖ ಓಪನ್ ಗ್ರಾಫ್ ಪ್ರಾಪರ್ಟಿಗಳು:
og:title: ವೆಬ್‌ಪುಟದ ಶೀರ್ಷಿಕೆ.og:description: ವೆಬ್‌ಪುಟದ ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ.og:url: ವೆಬ್‌ಪುಟದ ಕ್ಯಾನೊನಿಕಲ್ URL.og:site_name: ವೆಬ್‌ಸೈಟ್‌ನ ಹೆಸರು.og:image: ವೆಬ್‌ಪುಟವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಚಿತ್ರದ URL.og:type: ವೆಬ್‌ಪುಟದಲ್ಲಿನ ವಿಷಯದ ಪ್ರಕಾರ (ಉದಾ., ಲೇಖನ, ವೆಬ್‌ಸೈಟ್, ಪುಸ್ತಕ).
ಟ್ವಿಟರ್ ಮೆಟಾಡೇಟಾ
ಟ್ವಿಟರ್ ತನ್ನದೇ ಆದ ಮೆಟಾಡೇಟಾ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಹೊಂದಿದೆ, ಇದನ್ನು ನೀವು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಪುಟಗಳನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬಳಸಬಹುದು. Next.js ಮೆಟಾಡೇಟಾ API ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಿಗೆ ಟ್ವಿಟರ್-ನಿರ್ದಿಷ್ಟ ಮೆಟಾಡೇಟಾವನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.ಉದಾಹರಣೆ:
// app/page.js
export const metadata = {
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
twitter: {
card: 'summary_large_image',
title: 'My Awesome Blog Post',
description: 'A detailed exploration of a fascinating topic.',
site: '@example',
creator: '@example',
images: [
{
url: 'https://example.com/images/blog-post.jpg',
alt: 'My Awesome Blog Post Image',
},
],
},
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಟ್ವಿಟರ್ ಮೆಟಾಡೇಟಾಕ್ಕಾಗಿ card, title, description, site, creator, ಮತ್ತು images ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿದ್ದೇವೆ. ಪುಟವನ್ನು ಹಂಚಿಕೊಂಡಾಗ ಕಾರ್ಡ್ ರಚಿಸಲು ಟ್ವಿಟರ್ ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುತ್ತದೆ.
ಪ್ರಮುಖ ಟ್ವಿಟರ್ ಪ್ರಾಪರ್ಟಿಗಳು:
twitter:card: ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಕಾರ್ಡ್ ಪ್ರಕಾರ (ಉದಾ., ಸಾರಾಂಶ, ದೊಡ್ಡ ಚಿತ್ರದೊಂದಿಗೆ ಸಾರಾಂಶ).twitter:title: ವೆಬ್‌ಪುಟದ ಶೀರ್ಷಿಕೆ.twitter:description: ವೆಬ್‌ಪುಟದ ಸಂಕ್ಷಿಪ್ತ ವಿವರಣೆ.twitter:site: ವೆಬ್‌ಸೈಟ್‌ನ ಟ್ವಿಟರ್ ಬಳಕೆದಾರಹೆಸರು.twitter:creator: ವಿಷಯ ರಚನೆಕಾರರ ಟ್ವಿಟರ್ ಬಳಕೆದಾರಹೆಸರು.twitter:image: ವೆಬ್‌ಪುಟವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಚಿತ್ರದ URL.twitter:image:alt: ಚಿತ್ರಕ್ಕಾಗಿ ಆಲ್ಟ್ ಪಠ್ಯ.
Next.js ಮೆಟಾಡೇಟಾ API ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
Next.js ಮೆಟಾಡೇಟಾ API ನಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:- ವಿವರಣಾತ್ಮಕ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಶೀರ್ಷಿಕೆ ಟ್ಯಾಗ್‌ಗಳು ಪುಟದ ವಿಷಯವನ್ನು ನಿಖರವಾಗಿ ವಿವರಿಸಬೇಕು ಮತ್ತು ಸಂಬಂಧಿತ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರಬೇಕು. ಅವುಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ (ಆದರ್ಶಪ್ರಾಯವಾಗಿ 60 ಅಕ್ಷರಗಳಿಗಿಂತ ಕಡಿಮೆ) ಮತ್ತು ಆಕರ್ಷಕವಾಗಿ ಇರಿಸಿ.
- ಆಕರ್ಷಕ ವಿವರಣೆಗಳನ್ನು ಬರೆಯಿರಿ: ನಿಮ್ಮ ವಿವರಣೆ ಟ್ಯಾಗ್‌ಗಳು ಪುಟದ ವಿಷಯದ ಸಂಕ್ಷಿಪ್ತ ಸಾರಾಂಶವನ್ನು ಒದಗಿಸಬೇಕು ಮತ್ತು ಬಳಕೆದಾರರನ್ನು ಲಿಂಕ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಲು ಪ್ರೇರೇಪಿಸಬೇಕು. ಅವುಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ (ಆದರ್ಶಪ್ರಾಯವಾಗಿ 160 ಅಕ್ಷರಗಳಿಗಿಂತ ಕಡಿಮೆ) ಮತ್ತು ಕ್ರಿಯೆಗೆ ಕರೆಯನ್ನು ಒಳಗೊಂಡಿರಲಿ.
- ಸಂಬಂಧಿತ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಿ: ನಿಮ್ಮ ಶೀರ್ಷಿಕೆ, ವಿವರಣೆ ಮತ್ತು ಕೀವರ್ಡ್ ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಸಂಬಂಧಿತ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ಆದಾಗ್ಯೂ, ಕೀವರ್ಡ್ ತುಂಬುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು ನಿಮ್ಮ ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕಗಳ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಚಿತ್ರಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಓಪನ್ ಗ್ರಾಫ್ ಮತ್ತು ಟ್ವಿಟರ್ ಮೆಟಾಡೇಟಾಕ್ಕಾಗಿ ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಚಿತ್ರಗಳನ್ನು ಬಳಸಿ. ಚಿತ್ರಗಳು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿರಬೇಕು ಮತ್ತು ಪುಟದ ವಿಷಯವನ್ನು ನಿಖರವಾಗಿ ಪ್ರತಿನಿಧಿಸಬೇಕು. ನಿಧಾನ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ತಪ್ಪಿಸಲು ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ವೆಬ್ ಬಳಕೆಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಸ್ಥಿರವಾಗಿರಿ: ನಿಮ್ಮ ಎಲ್ಲಾ ಮೆಟಾಡೇಟಾದಾದ್ಯಂತ ಸ್ಥಿರವಾದ ಬ್ರ್ಯಾಂಡಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಿ. ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಗುರುತನ್ನು ಬಲಪಡಿಸಲು ಸ್ಥಿರವಾದ ಬಣ್ಣಗಳು, ಫಾಂಟ್‌ಗಳು ಮತ್ತು ಚಿತ್ರಣವನ್ನು ಬಳಸಿ.
- ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವನ್ನು ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವನ್ನು ಪರೀಕ್ಷಿಸಲು ಫೇಸ್‌ಬುಕ್ ಶೇರಿಂಗ್ ಡೀಬಗರ್ ಮತ್ತು ಟ್ವಿಟರ್ ಕಾರ್ಡ್ ವ್ಯಾಲಿಡೇಟರ್‌ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ಅದು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವನ್ನು ಸ್ಥಳೀಕರಿಸಿ: ನೀವು ಬಹುಭಾಷಾ ವೆಬ್‌ಸೈಟ್ ಹೊಂದಿದ್ದರೆ, ಪ್ರತಿ ಭಾಷೆಗೆ ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವನ್ನು ಸ್ಥಳೀಕರಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ವಿವಿಧ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಕೆನಡಾದ ಕಂಪನಿಯು ಇಂಗ್ಲಿಷ್ ಮತ್ತು ಫ್ರೆಂಚ್ ಮೆಟಾಡೇಟಾವನ್ನು ಹೊಂದಿರಬಹುದು. ಜಾಗತಿಕ ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಒಂದು ಡಜನ್ ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು ಭಾಷೆಗಳಲ್ಲಿ ಮೆಟಾಡೇಟಾವನ್ನು ಹೊಂದಿರಬಹುದು.
- ಡೈನಾಮಿಕ್ ಮೆಟಾಡೇಟಾವನ್ನು ಬಳಸಿ: ಪುಟದ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಡೈನಾಮಿಕ್ ಆಗಿ ಮೆಟಾಡೇಟಾವನ್ನು ಉತ್ಪಾದಿಸಲು
generateMetadataಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿ. ಇದು ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು, ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ಗಳು ಮತ್ತು ಇತರ ರೀತಿಯ ಡೈನಾಮಿಕ್ ವಿಷಯಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. - ಮೊಬೈಲ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ಆದ್ಯತೆ ನೀಡಿ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಮೊಬೈಲ್-ಸ್ನೇಹಿಯಾಗಿದೆ ಮತ್ತು ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವನ್ನು ಮೊಬೈಲ್ ಸಾಧನಗಳಿಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ತಮ್ಮ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ಗಳು ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳಲ್ಲಿ ವೆಬ್ ಅನ್ನು ಪ್ರವೇಶಿಸುವ ಬಳಕೆದಾರರ ಹೆಚ್ಚುತ್ತಿರುವ ಸಂಖ್ಯೆಯನ್ನು ಗಮನಿಸಿದರೆ ಇದು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ.
ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಮೂಲಭೂತಗಳ ಆಚೆಗೆ, Next.js ಮೆಟಾಡೇಟಾ API ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಮೆಟಾಡೇಟಾವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಹಲವಾರು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ:1. robots ಟ್ಯಾಗ್ ಬಳಸುವುದು
robots ಮೆಟಾ ಟ್ಯಾಗ್ ಸರ್ಚ್ ಇಂಜಿನ್ ಕ್ರಾಳರ್‌ಗಳು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿನ ಲಿಂಕ್‌ಗಳನ್ನು ಹೇಗೆ ಸೂಚಿಕೆ ಮಾಡಬೇಕು ಮತ್ತು ಅನುಸರಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಕೆಲವು ಪುಟಗಳನ್ನು ಸೂಚಿಕೆ ಮಾಡುವುದನ್ನು ತಡೆಯಲು, ಅಥವಾ ಪುಟದಲ್ಲಿನ ಲಿಂಕ್‌ಗಳನ್ನು ಅನುಸರಿಸುವುದನ್ನು ತಡೆಯಲು ನೀವು ಈ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬಹುದು.
ಉದಾಹರಣೆ:
// app/page.js
export const metadata = {
robots: {
index: false,
follow: true,
nocache: true,
googleBot: {
index: true,
follow: false,
noimageindex: true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳಿಗೆ ಪುಟವನ್ನು ಸೂಚಿಕೆ ಮಾಡದಂತೆ, ಆದರೆ ಪುಟದಲ್ಲಿನ ಲಿಂಕ್‌ಗಳನ್ನು ಅನುಸರಿಸುವಂತೆ ಹೇಳುತ್ತಿದ್ದೇವೆ. ನಾವು Googlebot ಕ್ರಾಳರ್‌ಗೆ ನಿರ್ದಿಷ್ಟ ಸೂಚನೆಗಳನ್ನು ಸಹ ಒದಗಿಸುತ್ತಿದ್ದೇವೆ.
2. alternates ಟ್ಯಾಗ್ ಬಳಸುವುದು
alternates ಮೆಟಾ ಟ್ಯಾಗ್ ವೆಬ್‌ಪುಟದ ಪರ್ಯಾಯ ಆವೃತ್ತಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಅನುವಾದಗಳು ಅಥವಾ ವಿಭಿನ್ನ ಸ್ವರೂಪಗಳು. ಇದು ಬಹುಭಾಷಾ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಬಹು ಸ್ವರೂಪಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ನೀಡುವ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ (ಉದಾ., AMP) ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ:
// app/page.js
export const metadata = {
alternates: {
canonical: 'https://example.com/blog/my-awesome-blog-post',
languages: {
'en-US': 'https://example.com/en-US/blog/my-awesome-blog-post',
'fr-FR': 'https://example.com/fr-FR/blog/my-awesome-blog-post',
'es-ES': 'https://example.com/es-ES/blog/my-awesome-blog-post',
},
},
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಪುಟಕ್ಕಾಗಿ ಕ್ಯಾನೊನಿಕಲ್ URL ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿದ್ದೇವೆ ಮತ್ತು ಇಂಗ್ಲಿಷ್, ಫ್ರೆಂಚ್ ಮತ್ತು ಸ್ಪ್ಯಾನಿಷ್‌ನಲ್ಲಿ ಪುಟದ ಪರ್ಯಾಯ ಆವೃತ್ತಿಗಳಿಗೆ ಲಿಂಕ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತಿದ್ದೇವೆ.
3. ವೆಬ್‌ಸೈಟ್ ಮಾಲೀಕತ್ವವನ್ನು ಪರಿಶೀಲಿಸುವುದು
verification ಮೆಟಾ ಟ್ಯಾಗ್ ಗೂಗಲ್ ಸರ್ಚ್ ಕನ್ಸೋಲ್ ಮತ್ತು ಪಿಂಟರೆಸ್ಟ್‌ನಂತಹ ವಿವಿಧ ಸೇವೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಮಾಲೀಕತ್ವವನ್ನು ಪರಿಶೀಲಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಹೆಚ್ಚುವರಿ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ವಿಶ್ಲೇಷಣೆಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ:
// app/page.js
export const metadata = {
verification: {
google: 'google_search_console_verification_code',
yandex: 'yandex_webmaster_verification_code',
yahoo: 'yahoo_site_explorer_verification_code',
bing: 'bing_webmaster_verification_code',
},
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಗೂಗಲ್ ಸರ್ಚ್ ಕನ್ಸೋಲ್, ಯಾಂಡೆಕ್ಸ್ ವೆಬ್‌ಮಾಸ್ಟರ್, ಯಾಹೂ ಸೈಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ಮತ್ತು ಬಿಂಗ್ ವೆಬ್‌ಮಾಸ್ಟರ್‌ಗಾಗಿ ಪರಿಶೀಲನಾ ಕೋಡ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತಿದ್ದೇವೆ.
ತಪ್ಪಿಸಬೇಕಾದ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು
Next.js ಮೆಟಾಡೇಟಾ API ಮೆಟಾಡೇಟಾ ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸಿದರೂ, ನಿಮ್ಮ SEO ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುವ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಅತ್ಯಗತ್ಯ:- ನಕಲಿ ಮೆಟಾಡೇಟಾ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಪುಟಕ್ಕೂ ವಿಶಿಷ್ಟವಾದ ಮೆಟಾಡೇಟಾ ಇದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನಕಲಿ ಮೆಟಾಡೇಟಾವು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳನ್ನು ಗೊಂದಲಗೊಳಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಶ್ರೇಯಾಂಕಗಳ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- ಕಾಣೆಯಾದ ಮೆಟಾಡೇಟಾ: ನಿಮ್ಮ ಎಲ್ಲಾ ವೆಬ್ ಪುಟಗಳಿಗೆ ಮೆಟಾಡೇಟಾವನ್ನು ಸೇರಿಸಲು ನಿರ್ಲಕ್ಷಿಸಬೇಡಿ. ಕಾಣೆಯಾದ ಮೆಟಾಡೇಟಾವು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಿಗೆ ನಿಮ್ಮ ಪುಟಗಳ ವಿಷಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟವಾಗಬಹುದು.
- ಕೀವರ್ಡ್ ತುಂಬುವುದು: ಕೀವರ್ಡ್ ತುಂಬುವುದನ್ನು ತಪ್ಪಿಸಿ, ಇದು ನಿಮ್ಮ ಮೆಟಾಡೇಟಾದಲ್ಲಿ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವ ಅಭ್ಯಾಸವಾಗಿದೆ. ಇದನ್ನು ಸ್ಪ್ಯಾಮ್ ಎಂದು ಪರಿಗಣಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕಗಳ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- ಅಪ್ರಸ್ತುತ ಮೆಟಾಡೇಟಾ: ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವು ಪುಟದ ವಿಷಯಕ್ಕೆ ಸಂಬಂಧಿಸಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಅಪ್ರಸ್ತುತ ಮೆಟಾಡೇಟಾವು ಬಳಕೆದಾರರನ್ನು ಗೊಂದಲಗೊಳಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ವಿಶ್ವಾಸಾರ್ಹತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಮೆಟಾಡೇಟಾವನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು: ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಿಗೆ ಓಪನ್ ಗ್ರಾಫ್ ಮತ್ತು ಟ್ವಿಟರ್ ಮೆಟಾಡೇಟಾವನ್ನು ಸೇರಿಸಲು ಮರೆಯಬೇಡಿ. ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಹಂಚಿಕೊಂಡಾಗ ನಿಮ್ಮ ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದು ಅತ್ಯಗತ್ಯ.
- ಮೆಟಾಡೇಟಾವನ್ನು ಪರೀಕ್ಷಿಸದಿರುವುದು: ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಮತ್ತು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ಮೆಟಾಡೇಟಾ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಅದನ್ನು ಪರೀಕ್ಷಿಸಿ. ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಫೇಸ್‌ಬುಕ್ ಶೇರಿಂಗ್ ಡೀಬಗರ್ ಮತ್ತು ಟ್ವಿಟರ್ ಕಾರ್ಡ್ ವ್ಯಾಲಿಡೇಟರ್‌ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.
- ಮೆಟಾಡೇಟಾವನ್ನು ನವೀಕರಿಸಲು ವಿಫಲವಾಗುವುದು: ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳ ವಿಷಯವನ್ನು ನಿಖರವಾಗಿ ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಗುರಿ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸಂಬಂಧಿತವಾಗಿ ಉಳಿಯುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮೆಟಾಡೇಟಾವನ್ನು ನಿಯಮಿತವಾಗಿ ಪರಿಶೀಲಿಸಬೇಕು ಮತ್ತು ನವೀಕರಿಸಬೇಕು.
ಮೆಟಾಡೇಟಾ ಪರೀಕ್ಷಿಸಲು ಉಪಕರಣಗಳು
ಹಲವಾರು ಉಪಕರಣಗಳು ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಮೌಲ್ಯೀಕರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ:- ಫೇಸ್‌ಬುಕ್ ಶೇರಿಂಗ್ ಡೀಬಗರ್: ಈ ಉಪಕರಣವು ಫೇಸ್‌ಬುಕ್‌ನಲ್ಲಿ ಹಂಚಿಕೊಂಡಾಗ ನಿಮ್ಮ ವೆಬ್‌ಪುಟಗಳು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ ಎಂಬುದನ್ನು ಪೂರ್ವವೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಓಪನ್ ಗ್ರಾಫ್ ಮೆಟಾಡೇಟಾಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಯಾವುದೇ ದೋಷಗಳು ಅಥವಾ ಎಚ್ಚರಿಕೆಗಳ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಸಹ ಒದಗಿಸುತ್ತದೆ. ಫೇಸ್‌ಬುಕ್ ಶೇರಿಂಗ್ ಡೀಬಗರ್
- ಟ್ವಿಟರ್ ಕಾರ್ಡ್ ವ್ಯಾಲಿಡೇಟರ್: ಈ ಉಪಕರಣವು ಟ್ವಿಟರ್‌ನಲ್ಲಿ ಹಂಚಿಕೊಂಡಾಗ ನಿಮ್ಮ ವೆಬ್‌ಪುಟಗಳು ಹೇಗೆ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ ಎಂಬುದನ್ನು ಪೂರ್ವವೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಟ್ವಿಟರ್ ಮೆಟಾಡೇಟಾಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಯಾವುದೇ ದೋಷಗಳು ಅಥವಾ ಎಚ್ಚರಿಕೆಗಳ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಸಹ ಒದಗಿಸುತ್ತದೆ. ಟ್ವಿಟರ್ ಕಾರ್ಡ್ ವ್ಯಾಲಿಡೇಟರ್
- ಗೂಗಲ್ ಸರ್ಚ್ ಕನ್ಸೋಲ್: ಈ ಉಪಕರಣವು ಗೂಗಲ್ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ಕ್ರಾಲ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸೂಚಿಕೆ ಮಾಡುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಮೆಟಾಡೇಟಾಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಸಹ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಗೂಗಲ್ ಸರ್ಚ್ ಕನ್ಸೋಲ್
- SEO Meta in 1 CLICK: ಈ ಕ್ರೋಮ್ ವಿಸ್ತರಣೆಯು ಎಲ್ಲಾ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಒಂದೇ ಕ್ಲಿಕ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಮೆಟಾಡೇಟಾವನ್ನು ಸುಲಭವಾಗಿ ಪರಿಶೀಲಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.